<template>
  <div class="flex items-center flex-col bg-white w-full">
    <div style="width: 1000px;">
      <div class="font-sans text-xl font-medium my-[10px]">{{ videoInfo.title }}</div>
      <videoPlay
        v-bind="options"
        @play="onPlay"
        @pause="onPause"
        @timeupdate="onTimeupdate"
        @canplay="onCanplay"
      />
      <div class="video-container">
        <div class="flex flex-row items-center">
          <el-avatar :src="videoInfo.author?.avatar ? videoInfo.author?.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
          <div class="ml-2">{{ videoInfo.author?.name }}</div>
        </div>
        <div>
          <button
            class="Btn"
            @click="likeVideo"
          >
            <span class="leftContainer">
              <svg
                :fill="liked? 'red' : 'white'"
                viewBox="0 0 512 512"
                height="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path>
              </svg>
              <span class="like">Like</span>
            </span>
            <span class="likeCount">
              {{ likedNum }}
            </span>
          </button>
        </div>
      </div>
      <el-divider />
      <div class="font-sans text-xl font-medium mb-[10px]">
        评论
      </div>
      <div class="mb-[20px] flex items-center">
        <el-avatar :src="userStore.userinfo.avatar ? userStore.userinfo.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
        <el-input
          v-model="comment"
          class="w-full ml-4"
          autosize
          type="textarea"
          placeholder="请输入评论"
        />
        <el-button
          type="primary"
          class="ml-3"
          @click="publishComment"
        >发布</el-button>
      </div>
      <div style="width: 100%;">
        <CommentComponent
          v-for="(comment, index) in commentData"
          :key="index"
          :commentData="comment"
        />
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { videoPlay } from 'vue3-video-play'
import 'vue3-video-play/dist/style.css' // 引入css
import { ElMessage } from 'element-plus'
import CommentComponent from '../../components/commentComponents.vue'
import service from '../../service/service'
import router from '../../router'
import { useUserStore } from '../../stores/user'
const userStore = useUserStore()
const videoInfo = ref<any>({})
const thisLikeVideoId = ref(0)
const comment = ref('')
onMounted(() => {
  getVideoInfo()
  getUserLiked()
  getComment()
})
console.log(router.currentRoute.value.params.id)

const getVideoInfo = () => {
  service({
    method: 'get',
    url: '/wuli-video/' + router.currentRoute.value.params.id,
  }).then((result: any) => {
    if (result.data.code === 200) {
      videoInfo.value = result.data.data
      options.src = videoInfo.value.path
      options.poster = videoInfo.value.cover
      likedNum.value = videoInfo.value.likeCount
    }
  })
}

const userLikeList = ref<any>([])
const getUserLiked = () => {
  service({
    method: 'get',
    url: 'wuli-user-video-like/user/' + userStore.userinfo.id,
  }).then((result: any) => {
    result.data.data.forEach((data: any) => {
      userLikeList.value.push(data.video.id)
      if (data.video.id === router.currentRoute.value.params.id) {
        liked.value = true
        thisLikeVideoId.value = data.id
      }
    })
  })
}

const liked = ref(false)
const likedNum = ref(0)
const options = reactive({
  width: '1000px', //播放器高度
  height: '562px', //播放器高度
  color: '#409eff', //主题色
  muted: false, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  title: '', //视频名称
  src: '', //视频源
  poster: '', //封面
})

const likeVideo = () => {
  // liked.value = !liked.value
  if (!liked.value) {
    service({
      method: 'post',
      url: '/wuli-user-video-like/save',
      data: {
        data: {
          user: { id: userStore.userinfo.id },
          video: { id: router.currentRoute.value.params.id },
        },
      },
    }).then((result: any) => {
      if (result.data.code === 200) {
        liked.value = true
        getUserLiked()
        getVideoInfo()
        ElMessage({
          message: '收藏成功',
          type: 'success',
        })
      }
    })
  } else {
    service({
      method: 'delete',
      url: '/wuli-user-video-like/' + thisLikeVideoId.value,
    }).then((result: any) => {
      if (result.data.code === 200) {
        liked.value = false
        getVideoInfo()
        ElMessage({
          message: '取消成功',
          type: 'success',
        })
      }
    })
  }
}

const commentData = ref<any>([])
const getComment = () => {
  service({
    method: 'get',
    url: 'wuli-video-comment/video/' + router.currentRoute.value.params.id,
  }).then((result: any) => {
    if (result.data.code === 200) {
      const comments = result.data.data
      console.log(comments)
      comments.forEach((comment: any) => {
        const extractedComment = {
          msg: comment.msg,
          id: comment.id,
          userName: comment.user.name,
          avatar: comment.user.avatar,
          createDateTime: comment.createDateTime.substring(0, 10), // Extracting only year-month-date
        }
        commentData.value.push(extractedComment)
      })
      console.log(commentData.value)
    }
  })
}

const publishComment = () => {
  service({
    method: 'post',
    url: 'wuli-video-comment/save',
    data: {
      data: {
        msg: comment.value,
        user: { id: userStore.userinfo.id },
        video: { id: router.currentRoute.value.params.id },
      },
    },
  }).then((result: any) => {
    if (result.data.code === 200) {
      getComment()
      ElMessage({
        message: '发布成功',
        type: 'success',
      })
      comment.value = ''
    }
  })
}

const onPlay = (ev) => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}

const onTimeupdate = (ev) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}
</script>

<style scoped>
.video-container {
  background-color: rgb(242, 242, 242);
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.024),
    100px 100px 80px rgba(0, 0, 0, 0.07);
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.Btn {
  width: 140px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.089);
  cursor: pointer;
  background-color: transparent;
}

.leftContainer {
  width: 60%;
  height: 100%;
  background-color: rgb(255, 73, 73);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.leftContainer .like {
  color: white;
  font-weight: 600;
}

.likeCount {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(238, 0, 0);
  font-weight: 600;
  position: relative;
  background-color: white;
}

.likeCount::before {
  height: 8px;
  width: 8px;
  position: absolute;
  content: '';
  background-color: rgb(255, 255, 255);
  transform: rotate(45deg);
  left: -4px;
}

.Btn:hover .leftContainer {
  background-color: rgb(219, 0, 0);
}

.Btn:active .leftContainer {
  background-color: rgb(201, 0, 0);
}

.Btn:active .leftContainer svg {
  transform: scale(1.15);
  transform-origin: top;
}
</style>